<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐排行榜</title>
    <!-- Bootstrap CSS -->
    <link href="../../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../../plugins/bootstrap/js/bootstrap.js" rel="stylesheet">
    <link rel="stylesheet" href="/dev/css/outer.css">
    <style>
        @import url(../../css/nav.css);
    </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <!-- 导航栏 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="../index.html">首页</a></li>
                    <li><a href="/dev/view/topChart/rank.html">排行榜</a></li>
                    <li><a href="/dev/view/playlist/playlist.html">歌单</a></li>
                </ul>
                
                <!-- 登录按钮 -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                    <li><img id="nav_img" src="../../img/1.png"></li>
                </ul>
    
                <!-- 搜索框 -->
            <form class="navbar-form navbar-right" id="searchForm">
                <div class="form-group">
                    <input type="text" class="form-control" id="searchInput" placeholder="搜索音乐">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
    
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>

    </div>
    </div>

    <!-- 模态框（Modal）-begin -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户登录入口

                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 登录表单   -begin -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="firstname" placeholder="请输入邮箱">
                            </div>
                            <div class="col-md-2" style="margin-left: -20px;">
                                <button type="button" class="btn btn-success">发送验证码</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">验证码</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default">登录</button>
                            </div>
                        </div>
                    </form>
                    <!-- 登录表单 -end -->
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal）- end -->
</nav>

<!-- 排行榜表格 -->
<div class="container">
    <div class="row">
        <!-- 榜单 -->
        <div class="col-md-2">
            <h3>特色榜</h3>
            <div class="row"><img src="" alt=""></div>
            <div class="row"><img src="" alt=""></div>
            <div class="row"><img src="" alt=""></div>
            <div class="row"><img src="" alt=""></div>
            <div class="row"><img src="" alt=""></div>
        </div>

        <!-- 表格 -->
        <div class="col-md-9">
            <div class="row">
                <!-- 分两行 -->

                <!-- 上侧展示行 -->
                <div class="row">
                    <!-- 图片 -->
                    <div class="col-md-4">
                        <div class="photo-frame">
                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=150y150"
                                 alt="">
                        </div>
                    </div>


                    <!-- 图片右侧信息展示 -->
                    <div class="col-md-8">

                        <div class="row" style="margin-top: 30px;">
                                <span style="color: #555; height: 30px; font-size:larger;">
                                    飙升榜
                                </span>
                        </div>

                        <!-- 图标 -->
                        <div class="row">
                            <span class="col-md-1 glyphicon glyphicon-time" style="padding-left: 0px;"></span>
                            <span class="col-md-6"
                                  style="color:#555; padding-left: 0px;margin-left: -25px;font-size: smaller;">最近更新：2025.3.2</span>
                        </div>

                        <!-- 播放等按钮 -->
                        <div style="margin-left: -15px">
                            <div class="btn-group btn-group-custom">
                                <!-- 播放按钮 -->
                                <button type="button" class="btn btn-primary">
                                    <i class="bi bi-play-fill"></i> 播放
                                </button>

                                <!-- 加入歌单按钮 -->
                                <button type="button" class="btn btn-light">
                                    <i class="bi bi-folder-plus"></i> 加入歌单
                                </button>

                                <!-- 转发按钮 -->
                                <button type="button" class="btn btn-light">
                                    <i class="bi bi-share"></i> 转发
                                </button>

                                <!-- 下载按钮 -->
                                <button type="button" class="btn btn-light">
                                    <i class="bi bi-download"></i> 下载
                                </button>

                                <!-- 评论按钮 -->
                                <button type="button" class="btn btn-light">
                                    <i class="bi bi-chat"></i> 评论
                                </button>
                            </div>
                        </div>


                    </div>

                </div>

                <!-- 表格行 -->
                <div class="row">
                    <!-- 歌曲列表 -->
                    <div class="row">
                        <span name="music_list">--------------------------------------------</span>
                    </div>

                    <table class="table">
                        <thead style="border-top-left-radius: 3px;">
                        <tr>
                            <th scope="col">排名</th>
                            <th scope="col">歌曲</th>
                            <th scope="col">歌手</th>
                            <th scope="col">专辑</th>
                            <th scope="col">时长</th>
                        </tr>
                        </thead>
                        <tbody id='list'>
                        <!--                            用js以及ajax填充内容-->
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pagination" id="pagination">
                            <!-- 分页按钮将在这里动态生成 -->
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/dev/plugins/jquery/jquery.min.js"> </script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    $(function () {
        const itemsPerPage = 10; // 每页显示的项目数
        let currentPage = 1; // 当前页码
        let allData = []; // 存储所有歌曲数据的数组

        // 根据歌曲名从服务器获取数据
        function fetchData(title) {
            $.ajax({
                url: '/dev/song',
                type: 'post',
                headers: {
                    'token': localStorage.getItem("token")
                },
                data: { 'title': title },
                success: function (res) {
                    if (res.code == "200") {
                        allData = res.data;
                        // renderPagination();  // 渲染分页导航栏
                        displayPage(currentPage); // 渲染当前页面
                    }
                }
            });
        }

        // 显示(渲染)分页导航栏
        function renderPagination() {
            const $pagination = $('#pagination');
            $pagination.empty(); //清空
            const pageCount = Math.ceil(allData.length / itemsPerPage);

            for (let i = 1; i <= pageCount; i++) {
                var activeClass = (i === currentPage) ? 'active' : '';
                $pagination.append(`<li class="page-item ${activeClass}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`);
            }

            $pagination.find('a').on('click', function (e) {
                e.preventDefault();
                currentPage = $(this).data('page');
                displayPage(currentPage);
            });
        }

        // 显示当前页的数据
        function displayPage(page) {
            currentPage = page;
            renderPagination();
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const pageData = allData.slice(start, end);

            let str = '';
            const tbody = document.getElementById('list');

            pageData.forEach((item, index) => {
                const minute = Math.floor(item.duration / 60);
                const second = (item.duration % 60).toString().padStart(2, '0');
                str += `
                        <tr>
                            <td>${(page - 1) * itemsPerPage + index + 1}</td>
                            <td onclick="listen(${item.songId})">${item.title}</td>
                            <td>${item.artist}</td>
                            <td>${item.album}</td>
                            <td>${minute}:${second}</td>
                        </tr>
                    `;
            });

            tbody.innerHTML = str;
        }

        // 初始化：获取数据并显示第一页
        const title = $("#searchInput").val();
        fetchData(title);

        // 搜索功能（可选）：当用户输入搜索词并按下回车键时，重新获取数据
        $('#searchInput').on('keypress', function (e) {
            if (e.which === 13) { // 回车键的键码是13
                currentPage = 1; // 重置当前页码为1
                fetchData($(this).val());
            }
        });
    });

    // 点击歌曲名跳转歌曲详情
    function listen(songId){
        window.location.href = `/dev/view/songDetail/player.html?songId=${songId}`
    }
</script>
</body>

</html>